<template>
	<view class="content">
		<view class="titile">填写群聊信息</view>
		<text class="inpsty">请不要使用涉黄涉政的词汇</text>
		<view class="photo-box" @click="upload('album')">
			<image :src='groupavatar'  class="afterimg" ></image>
			
			<image src='/static/img/group/upphoto.png' class="upphoto"></image>
			<view class="text">点击上传</view>
		</view>
		
		<input class="inputsty inp"  v-model="form.name" type="text" placeholder="请输入群名称不超过10个字符" maxlength="10"   @input="inputfun(0)" />
		<textarea  class="inputsty tear"  v-model="form.msg" type="text" maxlength="50"  @input="inputfun(1)" placeholder="请输入群介绍不超过200个字符" auto-height />
		
		<button class="creatbtn" @click="createGroup">创建群聊</button>
		   
	</view>
	
</template>

<script>
	import qiniuUploader from '@/common/qiniu/qiniu_wx.js';
	export default {
		data() {
			return {
				myInfo: {},
				platform: '',
				form:{
					name:'',
					msg:'',
					file: ''
				},
				
				groupavatar: '',
				qiniuToken: '',
				domain: '',
				progress: 0,
				
				
			}
		},
		onLoad(options) {
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo
				}
			} catch (e) {
				console.log(e)
			}
			try {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo) {
					this.platform = systemInfo.platform
				}
			} catch (e) {
				console.log(e)
			}
		},
		onReady() {
			// this.getVip();
			this.getQiniuToken();
		},
		methods: {
			getQiniuToken: function () {
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.myInfo.id,
					token: this.myInfo.token,
				}, res => {
					if (res.status) {
						this.qiniuToken = res.data.token
						this.domain = res.data.domain
					}
				})
			},
			
			createGroup(){
				if(this.groupavatar==""){
					uni.showToast({
						title: '请上传群头像',
						position: 'bottom',
						icon: 'none'
					})
				}else if(this.form.name==""){
					uni.showToast({
						title: '请填写群名称',
						position: 'bottom',
						icon: 'none'
					})
				}else if(this.form.msg==""){
					uni.showToast({
						title: '请填写群简介',
						position: 'bottom',
						icon: 'none'
					})
				} 
				
				this.$tim.createGroup({
					type: this.TIM.TYPES.GRP_WORK,
					name: this.form.name,
					introduction:this.form.msg,    //群简介
					avatar:this.domain+this.form.file
				}).then(function(imResponse) { // 创建成功
						uni.showToast({
							title: '群聊创建成功',
							position: 'bottom',
							icon: 'none'
						})
						setTimeout(function(){
							// 跳转消息页面
							uni.switchTab({
								url:"message"
							})
						},2000)
				     
				}).catch(function(imError) {
					uni.showToast({
						title: imError,
						position: 'bottom',
						icon: 'none'
					})
					
				});
			},
			inputfun(e){
				
				if(e==0){
					this.form.name=e.detail.value;
				}else{
					this.form.msg=e.detail.msg;
				}
			},
			upload: function (type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: [type],
					success: res => {
						let tempPaths = res.tempFilePaths[0].split('/');
						uni.showLoading({
							title: this.progress + '%'
						});
						qiniuUploader.upload(res.tempFilePaths[0], qiniu => {
							uni.hideLoading();
							this.groupavatar = res.tempFilePaths[0];
							this.form.file = qiniu.key;
							
						}, (err) => {
							console.log('err: ' + JSON.stringify(err));
						}, {
							region: 'SCN',
							domain: this.domain,
							key: tempPaths[tempPaths.length - 1],
							uptoken: this.qiniuToken,
						}, (res) => {
							this.progress = res.progress;
						}, () => {
							// 取消上传
						}, () => {
							// `before` 上传前执行的操作
						}, () => {
							// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
						});
					}
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/common.scss';
	.content{
		text-align: center;
		font-family:'SourceHanSansCN'!important ;
		padding-top: 140rpx;
		.titile{
			font-size: 48rpx;
			color: #444444;
			font-weight: bold;
			line-height: 48rpx;
			margin-bottom: 30rpx;
		}
		.inpsty{
			height: 36rpx;
			line-height: 36rpx;
			color: #b0b0b0;
		}
		.photo-box{
			width: 280rpx;
			height: 280rpx;
			margin: 0 auto;
			border-radius: 50%;
			border: 1px solid #ededed;
			margin: 90rpx auto;
			
			text-align: center;
			padding-top: 80rpx;
			box-sizing: border-box;
			position: relative;
			.afterimg{
				position: absolute;
				width: 280rpx;
				height: 280rpx;
				border-radius: 50%;
				left: 0;
				top: 0;
				
			}
			.upphoto{
				width: 53rpx;
				height:43rpx ;
				
			}
			.text{
			    font-size: 28rpx;
				color:#444;
			}
		}
		
		.inputsty{
			width: 576rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 30rpx !important;
			// color: #bcbcbc;
			text-align: center;
			margin-left: 30rpx;
			&:-moz-placeholder{
				font-size: 30rpx !important;
			}
			&.inp{
				margin-bottom: 40rpx;
			}
		}
		.creatbtn{
			width: 429rpx;
			height: 76rpx;
			background-image: none!important;
			background-color: #ff6487;
			color: #fff;
			border-radius: 38rpx;
			font-size: 30rpx;
			line-height: 76rpx;
			margin-top: 70rpx;
		}
		
	}
	
</style>
